import { history, request } from '@umijs/max';
import { Button, Form, Input, Select } from 'antd';
import React, { useEffect } from 'react';

export default function Page() {
  const [loginNameList, setLoginNameList] = React.useState<string[]>([]);

  const getLoginName = () => {
    request('/api/sys/loginNameget', {
      method: 'GET',
    }).then((res) => {
      setLoginNameList(res);
    });
  };

  /**
   * 登陆
   */
  const handleLogin = (form: any) => {
    console.log(form);
    request('/api/sys/login', {
      method: 'POST',
      data: form,
    }).then(() => {
      // 跳转到首页
      history.push('/home');
    });
  };

  useEffect(() => {
    getLoginName();
  }, []);

  return (
    <div>
      <h1>登陆</h1>
      <Form onFinish={handleLogin}>
        <Form.Item name={'username'}>
          <Select
            placeholder="请选择账号"
            options={loginNameList.map((v) => {
              return {
                label: v,
                value: v,
              };
            })}
          ></Select>
        </Form.Item>
        <Form.Item name={'password'}>
          <Input.Password placeholder="请输入密码"></Input.Password>
        </Form.Item>
        <Form.Item>
          <Button type={'primary'} htmlType={'submit'}>
            登陆
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
